<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="orderCont">
        <div class="orderHead">
          <div class="orderHeadName">招募岗位({{ orderArr.length }})</div>
          <div class="orderTop">
            <div class="orderNav">
              <div
                :class="stepId == item.id ? 'navItem_active' : 'navItem'"
                @click="navFn(item)"
                :key="index"
                v-for="(item, index) in navArr"
              >
                {{ item.val }}
              </div>
            </div>
          </div>
        </div>
        <div
          @click="detaiFn(item)"
          :class="index == 0 ? 'noTop orderItem' : 'orderItem'"
          :key="index"
          v-for="(item, index) in orderArr"
        >
          <div class="itemHead">
            <div class="headName">
              <div class="orderNum">{{ item.position_name }}</div>
              <div class="quckTag" v-if="item.position_type == 2">急聘</div>
            </div>
            <div class="headMoney">
              {{ item.price_start }}k ~ {{ item.price_end }}k
            </div>
          </div>
          <div class="orderTime">发布时间：{{ item.create_time }}</div>
          <div class="tagCont">
            <div class="tagItem">{{ item.experience }}</div>
            <div class="userNum_">·</div>
            <div class="tagItem">{{ item.education }}</div>
            <div class="userNum_">·</div>
            <div class="tagItem">{{ item.salary_month }}薪</div>
            <div class="userNum_">·</div>
            <div class="tagItem">{{ item.position_city }}</div>
          </div>
          <div class="formUnder">
            <div class="userInfo">
              <div class="userImgList">
                <div
                  class="userImg"
                  :key="index2"
                  v-for="(item2, index2) in item.bid_record"
                >
                  <img :src="item2" />
                </div>
              </div>
              <div class="userName">{{ item.bid_record.length }}人投该职位</div>
            </div>
            <div class="subBtn" @click="closeFn(item)">关闭岗位</div>
          </div>
        </div>
        <div class="loadMore" v-if="isChageNav">数据请求中~</div>
        <noData v-if="orderArr.length == 0 && !isChageNav"></noData>
      </div>
    </div>
    <div class="ctrlBtn">
      <div class="addBtn" @click="backFn">
        <span>返回</span>
      </div>
    </div>
    <subLoad v-if="showSub"></subLoad>
  </div>
</template>
<script>
import { position, positionClose } from "@/http/api";
import noData from "@/components/public/noData.vue";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import subLoad from "@/components/public/subLoad.vue";

export default {
  components: { noData, subLoad },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      isChageNav: false,
      showSub: false,
      serchKey: "",
      navArr: [
        { val: "全部", id: 0 },
        { val: "审核中", id: 1 },
        { val: "招募中", id: 2 },
        { val: "已关闭", id: 4 },
      ],
      stepId: 0,
      orderArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    closeFn(item) {
      positionClose({
        title: "关闭提示",
        message: "确定关闭此岗位招募吗?点击确认之后此岗位将停止招募。",
      })
        .then(() => {
          if (!this.showSub) {
            let data = {
              enterprise_position_id: item.enterprise_position_id,
            };
            this.showSub = true;
            checkAccept(data)
              .then((res) => {
                if (res.data.code == 1) {
                  showSuccessToast("关闭成功");
                  this.page = 1;
                  this.orderArr = [];
                  this.getData();
                } else {
                  showToast(res.data.msg);
                }
                this.showSub = false;
              })
              .catch(() => {
                this.showSub = false;
              });
          }
        })
        .catch(() => {});
    },
    keyDownFn() {},
    serchFn() {},
    backFn() {
      this.$router.back();
    },
    detaiFn() {
      this.$router.push({ path: "/orderDetail" });
    },
    navFn(item) {
      this.stepId = item.id;
      this.orderArr = [];
      this.page = 1;
      this.getData();
    },
    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
        status: this.stepId,
      };
      if (this.isChageNav) {
        return false;
      }
      this.isChageNav = true;
      position(data)
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data && res.data.data.data) {
              let arr = res.data.data.data;
              for (let i = 0; i < arr.length; i++) {
                this.orderArr.push(arr[i]);
              }
              setTimeout(() => {
                this.getting = false;
              }, 100);
              this.last_page = res.data.data.last_page;
            }
          } else {
            showToast(res.data.msg);
          }
          this.isChageNav = false;

          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/workRecord") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #f1f4fb;
  .showCont {
    padding-bottom: 4rem;
    box-sizing: border-box;
    background-color: #f1f4fb;
    padding-top: 0.75rem;
  }
  .orderCont {
    width: 92%;
    margin: 0 auto;
    background: #fff;
    padding: 0.75rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .orderHead {
      display: flex;
      font-weight: bold;
      align-items: center;
      margin-bottom: 0.25rem;
      justify-content: space-between;
      .orderHeadName {
        font-size: 0.8rem;
        font-weight: bold;
      }
      .orderTop {
        box-sizing: border-box;
        .orderNav {
          display: flex;
          position: relative;
          justify-content: space-between;
          .navItem,
          .navItem_active {
            text-align: center;
            padding: 0.25rem 0;
            box-sizing: border-box;
            font-size: 0.65rem;
            color: #666;
            font-weight: normal;
            white-space: nowrap;
            margin-left: 0.75rem;
          }
          .navItem_active {
            color: #86a9fb;
            border-bottom: 1px solid #86a9fb;
          }
        }
      }
    }
    .orderItem {
      padding: 0.75rem 0;
      border-top: 1px dashed #ccc;
      border-radius: 0.25rem;
      .itemHead {
        // padding: 0rem 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .headName {
          display: flex;
          align-items: center;
          .orderNum {
            font-weight: bold;
            font-size: 0.8rem;
          }
          .orderTag,
          .quckTag {
            padding: 0.1rem 0.5rem;
            box-sizing: border-box;
            color: #ff5757;
            border: 1px solid #ff5757;
            border-radius: 0.1rem;
            font-size: 0.6rem;
            // margin-left: 0.5rem;
            transform: scale(0.85);
          }
        }
        .headTime {
          color: #999;
          font-size: 0.6rem;
        }
        .headMoney {
          color: #86a9fb;
          font-size: 0.8rem;
        }
      }
      .orderTime {
        color: #666;
        font-size: 0.6rem;
        margin-top: 0.5rem;
      }
      .tagCont {
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        margin-top: 0.25rem;
        .tagItem {
          color: #666;
        }
        .userNum_ {
          margin: 0 0.25rem;
        }
      }
      .orderForm {
        margin-top: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .itemForm {
          flex: 1;
          width: 1rem;
          margin-right: 0.75rem;
        }
        .orderPricr {
          font-size: 1rem;
          color: #86a9fb;
        }
      }
      .formItem {
        display: flex;
        line-height: 1rem;
        margin-bottom: 0.25rem;
        .itemName {
          margin-right: 0.75rem;
          width: 3rem;
        }
        .itemVal {
          color: #666;
          flex: 1;
          width: 1rem;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 超出几行省略 */
        }
      }
      .formUnder {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
        .userInfo {
          display: flex;
          align-items: center;
          .userImgList {
            display: flex;
            margin-right: 0.5rem;
            .userImg {
              width: 1.5rem;
              height: 1.5rem;
              padding: 0.1rem;
              background-color: #86a9fb;
              font-size: 0;
              border-radius: 50%;
              overflow: hidden;
              margin-left: -0.4rem;
              img {
                border-radius: 50%;
                width: 100%;
              }
            }
          }
          .userName {
            color: #666;
            font-size: 0.65rem;
          }
        }
        .subBtn {
          // padding: 0.25rem 1rem;
          // border: 1px solid #86a9fb;
          color: #86a9fb;
          font-size: 0.6rem;
          border-radius: 0.25rem;
        }
      }
    }
    .loadMore {
      color: #999;
      text-align: center;
      font-size: 0.6rem;
      margin-top: 3rem;
    }
    .noTop {
      border-top: none;
    }
  }
  .ctrlBtn {
    width: 100%;
    background-color: #fff;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    .homeBtn {
      width: 2.2rem;
      margin-right: 0.75rem;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #86a9fb;
      color: white;
      text-align: center;
      font-size: 1rem;
    }
    .addBtn {
      flex: 1;
      width: 2rem;
      line-height: 2.2rem;
      letter-spacing: 0.1rem;
      text-align: center;
      font-size: 0.7rem;
      // color:#86a9fb;
      background-color: #86a9fb;
      color: white;
      border-radius: 0.25rem;
    }
  }
}
</style>
